<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>KUAISHOU</title>

<script src="lib/jquery-3.4.1.min.js"></script>
<!-- video-js -->
<link href="lib/video-js-8.11.7/video-js.min.css" rel="stylesheet">
<script src="lib/video-js-8.11.7/video.min.js"></script>
<script src="lib/video-js-8.11.7/lang/zh-CN.js"></script>

<!-- openseadragon -->
<script type="text/javascript" src="lib/openseadragon/openseadragon.js"></script>

<script type="text/javascript" src="lib/bootstrap-5.3.3-dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-5.3.3-dist/css/bootstrap.css">
<!--
<link rel="stylesheet" type="text/css" href="HTML5CSS.css">
<script type="text/javascript" src="HTML5JS.js"></script>
<style type="text/css"></style>
<script type="text/javascript"></script>
-->

<style type="text/css">
.search-text{
    width: 100%;
    font-size: 25px;
    font-family: Consolas;
    padding: 6px 12px;
    border: 1px solid #ccc;/*0078D7*/
    border-radius: 4px;
    cursor: text;
    outline: none;
    background-color: #202124;
    color: white;
}
.my-body{
    background-color: #35363A;
}
#imglist{
    font-size: 0;
}
#imglist img {
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 0.25rem !important;
}
#head_wrapper{
    width: 100%;
    position: fixed;
    background-color: #35363A;
}
.text-size{
    /* 修改div默认字体 间距 大小 影响div下的span字体*/
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height:1.42857143;
    border-spacing: 0;
}

/* 鼠标指针变为小手形状 */
.custom-element {
    cursor: pointer;
}

.pagination-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  /*background-color: #f1f1f1;*/
  padding: 0px;
  margin: 0px;
  box-shadow: 2px -2px 5px rgba(0,0,0,0.1); /* 添加阴影，提升视觉效果 */
}
.blur-background {
    filter: blur(15px); /* 调整模糊程度 */
    transition: filter 0.0s;
}

.modal-body{
    padding: 5px;
}

.container-dy {
    display: flex;
}

.left-column {
    flex: 1;
    /* background-color: lightgray; */
    /* padding: 10px; */
}

.right-column {
    /* flex: 1; */
    /* background-color: lightblue; */
    /* padding: 10px; */
    padding-left: 20px;
    width: 100%;
}
</style>


</head>
<body class="my-body">
<div class="position-fixed bottom-0 end-0">
    <a class="btn btn-outline-secondary btn-sm" onclick="scrollToTop()">顶部</a>
    <br>
    <br>
    <a class="btn btn-outline-secondary btn-sm" onclick="scrollToBottom()">低部</a>
</div>

<div class="container-fluid">
    <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
        打开模态框
    </button> -->
    <br>
    <div class="input-group-text" style="border:0px;background-color: #35363A;">
        <input id="searchId" type="search" class="search-text" placeholder="Search..." aria-label="Search" onsearch="searchData()">
        <button class="btn btn-outline-success" type="submit" onclick="searchData()">Search</button>
    </div>
    <div id="imglist" style="width:1804.6px">
	    <img src="http://127.0.0.1:7020/like/cover/cover_3x397m4karszfhi.jpg" alt="" onclick="openVideo('3x397m4karszfhi_hd15')" width="322" height="430">
    </div>
    <br>
    <ul class="pagination pagination-sm pagination-bar" id="pageBar">
        <li class="page-item"><a class="page-link" onclick="openPage('Previous')">Previous</a></li>
        <li class="page-item"><a class="page-link" onclick="openPage('1')">1</a></li>
        <li class="page-item active"><a class="page-link" onclick="openPage('2')">2</a></li>
        <li class="page-item"><a class="page-link" onclick="openPage('3')">3</a></li>
        <li class="page-item"><a class="page-link" onclick="openPage('Next')">Next</a></li>
    </ul>
</div><!--container-->


<!-- video模态框 -->
<div class="modal " id="myModal" tabindex="-1" data-bs-keyboard="true" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xl" style="margin-top:0px;margin-bottom:0px;height:100%;"><!--modal-fullscreen-->
		<div class="modal-content" style="border-radius:0px;width:900px;margin:auto">
			<!-- 模态框内容 -->
			<div class="modal-body">


				<div class="container-dy">
					<div class="left-column">
						<!-- 左列内容 -->
						<video id="vid" class="video-js" controls preload="none" width="576" height="1024" data-setup="{}" ></video>
					</div><!-- ./left-column -->
					<div class="right-column">
						<!-- 右列内容 -->
							<button type="button" class="btn-close float-lg-end" data-bs-dismiss="modal"></button>
							<!-- <button type="button" class="btn btn-danger float-lg-end" data-bs-dismiss="modal">关闭</button> -->
							<br>
							<!-- <span id="demo" class=""></span> -->
							<div class="text-size">
								<a id="sec_uid" href="" target="_blank">
									<img id="user_img" src="" class="rounded" alt="" width="100" height="100">
								</a>
							</div>
							<br>
							<div class="text-size"><span id="nickname"></span></div>
							<div class="text-size"><span id="desc"></span><br></div>
							<div class="text-size">
								<!-- <svg width="18" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.12 3.225l-.721.693A1 1 0 009.938 3.8l-.819-.574zm6.94 2.812h-1a1 1 0 001.906.425l-.905-.425zm0 0h1a1 1 0 00-1.904-.425l.905.425zm-.001.15l-1-.022 1 .023zm.002.084l1 .018a1 1 0 00-.092-.437l-.908.419zm-.24 1.406l.748.664a1 1 0 00.215-.393l-.962-.27zm-.239.469l.84.541a.996.996 0 00.09-.174l-.93-.367zm-.24.468l.86.512a1 1 0 00.076-.157l-.935-.355zm-.146.238l-.842-.539.842.539zm-2.29 2.745l-.707-.707-.002.002.71.705zm-3.03 2.722l-.636-.772.637.772zm-.276.233l-.707-.707.707.707zm-.605.2l.017-1h-.013l-.004 1zm-.903-.49l.625-.78a.936.936 0 00-.032-.026l-.593.806zm-3.307-2.909l.719-.695-.003-.003-.716.699zM2.4 8.152l.907-.42a1 1 0 00-.013-.027l-.894.447zM1.938 6.27l-.705-.709a1 1 0 00-.294.73l1-.021zm.003-.08l1-.026-1 .026zM11.99.818c-1.444 0-2.831.608-3.69 1.832L9.938 3.8c.432-.616 1.165-.98 2.054-.98v-2zm5.07 5.219c0-2.808-2.26-5.219-5.07-5.219v2c1.634 0 3.07 1.444 3.07 3.219h2zm0 0h-2 2zm-1.905-.425l1.81.85-1.81-.85zm1.903.599l.002-.174h-2l-.002.128 2 .046zm-.09-.359a.979.979 0 01.084.307c.005.04.005.07.005.074V6.21l-1.999-.046v.093c0 .018 0 .058.005.107.003.024.015.166.089.325l1.816-.838zm-.185 2.096c.158-.564.266-1.055.277-1.66l-2-.034c-.006.359-.065.664-.202 1.153l1.925.54zm-.272.565c.037-.092.064-.155.085-.2l.014-.027a.517.517 0 01-.042.055l-1.495-1.328c-.132.149-.22.313-.272.42a4.839 4.839 0 00-.15.345l1.86.735zm-.234.456c.029-.077.044-.109.056-.134.014-.026.035-.065.089-.148L14.74 7.604a3.06 3.06 0 00-.333.656l1.87.709zm-.24.421c.057-.087.111-.175.164-.264l-1.718-1.023c-.042.069-.085.14-.13.21l1.685 1.077zm-2.424 2.914c.863-.863 1.762-1.874 2.425-2.915l-1.686-1.075c-.552.865-1.338 1.76-2.153 2.576l1.414 1.414zm-3.101 2.787c.548-.452 1.832-1.51 3.103-2.79l-1.419-1.41c-1.195 1.204-2.412 2.207-2.957 2.656l1.273 1.543zm-.206.168c-.02.02-.032.03-.018.018l.044-.038.18-.149-1.273-1.543c-.117.097-.275.226-.347.298l1.414 1.414zM9 15.752c.215 0 .796.018 1.307-.493l-1.414-1.414c.01-.01.032-.03.066-.05a.402.402 0 01.098-.038c.026-.007.04-.007.03-.006H9v2zm-.023 0H9v-2h.012l-.035 2zm-1.485-.693c.21.209.664.69 1.498.693l.009-2c-.014 0-.01-.002.005.003.016.004.029.01.035.014.005.003-.002 0-.025-.02a2.548 2.548 0 01-.107-.104l-1.415 1.414zm-.026-.017l.033.027.021.017.004.003-.01-.008a.772.772 0 01-.022-.022l1.415-1.414c-.063-.063-.153-.134-.19-.164l-1.25 1.56zm-3.4-2.993A29.95 29.95 0 007.5 15.067l1.186-1.61a27.982 27.982 0 01-3.181-2.8L4.067 12.05zM1.493 8.571c.578 1.253 1.592 2.472 2.578 3.481l1.43-1.397c-.933-.956-1.758-1.98-2.193-2.923l-1.815.84zM.939 6.293c.008.374.094.828.19 1.21.095.38.228.8.376 1.096l1.789-.894a4.046 4.046 0 01-.226-.689 4.03 4.03 0 01-.13-.767l-2 .044zm.002-.077v.017a.973.973 0 01.291-.67L2.645 6.98a1.006 1.006 0 00.298-.716l-.002-.1-1.999.052zm-.003-.18c0 .08.002.142.003.18l2-.051c-.002-.036-.003-.076-.003-.128h-2zM6.008.819c-2.81 0-5.07 2.41-5.07 5.219h2c0-1.776 1.435-3.219 3.07-3.219v-2zM9.84 2.531C8.79 1.44 7.477.818 6.008.818v2c.859 0 1.669.35 2.391 1.1l1.44-1.387z" fill="#fff"></path></svg> -->
								<!-- <svg width="32" height="32" fill="#FE2C55" xmlns="http://www.w3.org/2000/svg" class="u1O5vnab eclJUOOC" viewBox="0 0 36 36"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.19 9.74c1.03-1.466 2.718-2.24 4.576-2.24 3.54 0 6.483 3.07 6.483 6.72v.001h.001c0 .103-.002.182-.003.24a.539.539 0 00.003.133c-.014.767-.146 1.402-.381 2.24-.134.15-.258.434-.382.746-.195.303-.269.45-.381.747-.095.16-.195.32-.3.48-.959 1.48-2.266 2.955-3.568 4.258-1.969 1.983-3.969 3.631-4.84 4.35-.243.2-.398.328-.442.372-.31.31-.621.318-.932.318H18c-.638 0-.956-.318-1.275-.637a3.037 3.037 0 00-.178-.15c-.968-.712-3.155-2.46-5.204-4.568-1.55-1.58-3.04-3.39-3.858-5.16-.319-.637-.717-2.154-.735-2.996.007-.007.006-.048.004-.128-.002-.06-.004-.14-.004-.246 0-3.651 2.942-6.72 6.483-6.72 1.855 0 3.546.774 4.957 2.24z" fill="#2F3035" fill-opacity="0.9"></path></svg> -->
								&#129293;<span id="zhan"></span>
							</div>
							<div class="text-size"><span id="createTime"></span></div>
							<br>
							<div class="text-size">倒排序：<span id="index"></span><br></div>
							<div class="text-size"><a id="video_index" href="" target="_blank">视频主页</a></div>
							<div class="text-size">ID：<span id="data_id"></span><br></div>

							<br>
							<div class="text-size">
								<a id="music" href="" target="_blank">
									<img id="music_img" src="" class="rounded" alt="" width="100" height="100">
								</a>
							</div>
					</div><!-- ./right-column -->
				</div><!-- ./container-dy -->

			</div><!--modal-body-->
		</div><!--modal-content-->
	</div><!--modal-dialog-->
</div><!-- 模态框 -->

<script type="text/javascript">

// 函数：获取URL参数并返回一个对象
function getUrlParameters() {
	const params = {};
	const urlParams = new URLSearchParams(window.location.search);

	urlParams.forEach((value, key) => {
		params[key] = value;
	});
	return params;
}

// 立即调用函数并存储结果
const urlParams = getUrlParameters();
console.log(urlParams); // 输出参数对象到控制台

let videoId = ''//全局变量
let videoUrl = ''//全局变量
let videoJson = ''//全局变量
let list = [];
let listAll = [];
const map = new Map()//视频列表Map
const imagesMap = new Map()//图集Map
let pageNumber = 1;
let pageSize = 175;

const videoApiUrl = "json/" + urlParams['video'] + ".json"
const serverAddrs = "http://127.0.0.1:7020/" + urlParams['path'];
const videoRoot = serverAddrs + "/video/";
const videoImgRoot = serverAddrs + "/cover/";
const userImgRoot = serverAddrs + "/header/";
const animatedCoverRoot = serverAddrs + "/animated_cover/";

// 在页面加载完成后执行
$(function () {
	$('title').text(urlParams['title']);

	loadPageList();
});

function loadPageList() {
	//视频列表
	list = [];
	$.ajax({
		url: videoApiUrl,
		contentType: "application/x-www-form-urlencoded",
		type: "GET",
		dataType: "json",
		async: false,
		success: function (array) {
			for (let index = 0; index < array.length; index++) {
				const element = array[index];
				if (element.id != undefined) {
					list.push(element)
					element.index = index + 1
					map.set(element.id, element)
				}
			}
			listAll = list
		}
	});
}

$(function () {
	var all = ""
	for (let index = 0; index < pageSize && index < list.length ; index++) {//index < list.length
		const element = list[index];
		let img = `
		<img src="${videoImgRoot + element.cover_name}" alt="" onclick="openVideo('${element.id}')" width="218px" height="360px">
		`
		all = all + img + "\n"
	}
	$("#imglist").html(all)
	setPage(1, list.length)
});

//打开视频 全局变量
function openVideo(ID) {
	videoId = ID
	//videoUrl="video/"+videoId+".mp4"
	videoUrl = videoRoot + videoId + ".mp4"
	//$("#vidsrc").attr("src","video/"+videoId+".mp4");
	var element = map.get(videoId)
	console.log(element)
	if (element.type == "1") {
		//打开视频框
		$('#myModal').modal('show')
	} else if (element.type == "2") {
		//打开图集框
		$('#myModal2').modal('show')
	}
}


//打开分页
function openPage(page) {
	if ("上一页" == page) {
		pageNumber = Number(pageNumber) - 1;
		pageNumber = Math.max(pageNumber, 1)
	} else if ("下一页" == page) {
		pageNumber = Number(pageNumber) + 1;
		pageNumber = Math.min(pageNumber, Math.ceil(list.length / pageSize))
	} else {
		pageNumber = Number(page)
	}
	var all = ""
	var start = (Number(pageNumber) - 1) * pageSize;
	var num = 0
	for (let index = start; (index < list.length) && (num++ < pageSize); index++) {
		const element = list[index];
		var img = "<img src='" + videoImgRoot + element.cover_name + "' alt='' onclick=\"openVideo('" + element.id + "')\" width='218px' height='360px'>"
		all = all + img + "\n"
	}
	setPage(pageNumber, list.length)
	$("#imglist").html(all)
}

//设置分页栏
function setPage(pageNumber, total) {
	var all = "<li class=\"page-item\"><a class=\"page-link\" onclick=\"openPage('上一页')\">上一页</a></li>\n";
	for (let index = 1; index <= Math.ceil(total / pageSize); index++) {
		if (pageNumber == index) {
			all = all + "<li class=\"page-item active\"><a class=\"page-link\" onclick=\"openPage('" + index + "')\">" + index + "</a></li>\n";
		} else {
			all = all + "<li class=\"page-item\"><a class=\"page-link\" onclick=\"openPage('" + index + "')\">" + index + "</a></li>\n";
		}
	}
	all = all + "<li class=\"page-item\"><a class=\"page-link\" onclick=\"openPage('下一页')\">下一页</a></li>";
	all = all + "<li class=\"page-item\"><span class=\"page-link\" >" + total + "</span></li>";
	$("#pageBar").html(all)
}

//搜索内容
function searchData() {
	var keyWord = $("#searchId").val().trim();
	if ('' == keyWord) {
		list = listAll;
		openPage(1)
	} else {
		var reg = new RegExp(keyWord);
		var newList = [];
		for (let index = 0; index < listAll.length; index++) {
			const element = listAll[index];
			var desc = element.caption;
			var nickname = element.nickname;
			if (desc && desc.match(reg)) {
				newList.push(element)
			}
			if (nickname && nickname.match(reg)) {
				newList.push(element)
			}
		}
		list = newList;
		openPage(1)
	}
}
</script>


<script>
let playCount = 1;//播放次数
var playTotal = 10;//播放总次数

//当 show 实例方法被调用之后，此事件被立即触发。
$(function () {
	$('#myModal').on('show.bs.modal', function (event) {
		var x = $("#demo").get(0)
		var w = document.documentElement.clientWidth - 100
		var h = document.documentElement.clientHeight - 20
		if (x != undefined) {
			x.innerHTML = "浏览器window宽度: " + w + ", 高度: " + h + "。"
		}
		//$(".modal-body").css("padding", "15px");
		//$(".modal-content").css("width", "898px");
		//$(".modal-body").css("background-color","darkgray");
		var element = map.get(videoId)
		$("#sec_uid").attr("href", "https://www.kuaishou.com/profile/" + element.uid)
		$("#user_img").attr("src", userImgRoot + element.header_name)
		$("#nickname").html(element.nickname)
		$("#desc").html(element.caption)
		$("#zhan").html(element.like_count)
		$("#createTime").html(element.create_time_lable)

		$("#index").html(element.index)//倒排序
		$("#video_index").attr("href", "https://www.kuaishou.com/short-video/" + element.video_id + "?authorId=" + element.uid)//视频主页
		$("#data_id").html(element.id)//ID
		//音乐
		if(element.music_mid){
			$("#music").css("pointer-events","auto")
			$("#music").attr("href", musicRoot + element.music_mid + ".mp3")
			$("#music_img").attr("src", "images/music_not_available.jpg")
		}else{
			$("#music").css("pointer-events","none")
			$("#music_img").attr("src",  "images/music_default.jpeg")
		}
		//$("#vid").attr("height",h);
		//$("#vid").attr("width",w);
		//var video = $("#vid").get(0)
		var video = videojs('vid');
		video.height(h);
		video.src(videoUrl)
		video.load(videoUrl)
		video.volume(1);
		video.play()
		playCount = 1;
		addBlur();
	})
});

//监听播放结束
$(function () {
	var video = videojs('vid');
	video.on("ended", function () {
		console.log("播放结束" + playCount)
		if (playCount++ < playTotal) {
			// video.play()//继续播放
		}
	});
});

//当隐藏时触发
$(function () {
	$('#myModal').on('hide.bs.modal', function () {
		//var video = $("#vid").get(0)
		var video = videojs('vid');
		video.pause()
        removeBlur();
	})
});

    //当隐藏时触发
    $(function () {
        $('#myModal2').on('hide.bs.modal', function () {
            //var video = $("#vid").get(0)
            var video = videojs('vid');
            video.pause()
            removeBlur();
        })
    });

    // 添加模糊效果的方法
    function addBlur() {
        $('#imglist').addClass('blur-background');
    }

    // 移除模糊效果的方法
    function removeBlur() {
        $('#imglist').removeClass('blur-background');
        videoId = null
    }
//显示选择的图片
function showImg(img_name) {
	var imgsrc = imagesRoot + img_name
	//$("#images_id").attr("src", imgsrc);

	$("#openseadragon1").html("")
	OpenSeadragon({
		id: 'openseadragon1', // 装载到的容器
		prefixUrl: "lib/openseadragon/images/", // 工具所需用到图表样式路径
		//showNavigator: true,  // 是否显示导航缩略图
		tileSources:   [{
			type: 'image',
			url:  imgsrc,
		}]
	});
}

    //关闭声音 打开声音
    function volumeCtl() {
        var video = videojs('vid');
        let innerHTML = '';

        // 检查视频是否处于暂停状态
        if (video.paused()) {
            // 如果视频是暂停的，则播放
            video.play();
            //innerHTML = volume_open_svg;
        } else {
            // 如果视频正在播放，则暂停
            video.pause();
            //innerHTML = volume_close_svg;
        }
        //$("#volume_btn").html(innerHTML)
    }

    //设置快捷键
    $(document).ready(function () {
        let isSpacePressed = false; // 用于记录空格键是否按下
        let isLeftPressed = false; // 用于记录左箭头键是否按下
        let isRightPressed = false; // 用于记录右箭头键是否按下

        $(document).keydown(function (event) {
            if(videoId === null) return
            if (event.keyCode === 32 && !isSpacePressed) {
                isSpacePressed = true; // 标记空格键已按下
                volumeCtl();
            }

            if (event.keyCode === 37 && !isLeftPressed) {
                isLeftPressed = true; // 标记左箭头键已按下
                prev_image();
            } else if (event.keyCode === 39 && !isRightPressed) {
                isRightPressed = true; // 标记右箭头键已按下
                next_image();
            }
        });

        $(document).keyup(function (event) {
            if (event.keyCode === 32) {
                isSpacePressed = false; // 重置空格键状态
            }

            if (event.keyCode === 37) {
                isLeftPressed = false; // 重置左箭头键状态
            } else if (event.keyCode === 39) {
                isRightPressed = false; // 重置右箭头键状态
            }
        });
    });

    //回到顶部
    function scrollToTop() {
        window.scrollTo(0, 0);
    }

    //回到底部
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
</script>

</body>
</html>